<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('方法 字段参数选择页面')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/js/plugins/swiper/swiper-bundle.css}" rel="stylesheet"/>
		<link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
		<script th:src="@{/js/plugins/swiper/swiper-bundle.js}"></script>
	</head>
	<body class="">
		<div class="wrapper wrapper-content field">
			<form id="form-interface-field">
				<input type="hidden" name="interfaceId" id="interfaceId" th:value="${interfaceId}">
				<input type="hidden" name="isInParam" id="isInParam" th:value="${isInParam}">
				<input type="hidden" name="type" value="1">
				<input type="hidden" name="objectType" value="1">
				<input type="hidden" id="fieldInfo" name="fieldInfo">
				<div class="content">
					<div class="pull-left">
						<img th:src="@{/img/add_btn.png}" class = "addTableModelBtn">
					</div>
					<div class="swiper tabSwiper">
						<ul class="nav nav-tabs first-navtabs swiper-wrapper" role="tablist">

						</ul>
					</div>

					<div class="tab-content" id="tabDiv">

					</div>
				</div>
			</form>
		</div>
	</body>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "interface/interface";
		var initFlag = true;
		var tableInfoList = [[${tableInfoList}]] || [];
		var fieldIdList = [[${fieldIdList}]] || [];
		var fieldIdListObject = {};
		var tableIdRecordArr = [];
		function submitHandler() {
			var count = $("#fieldSelect",window.parent.document).text();
			if (count > 0) {
				var config = {
					url: prefix + "/saveMethodParam",
					type: "post",
					async: false,
					dataType: "json",
					data: $('#form-interface-field').serialize(),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
						$.modal.disable();
					},
					success: function(result) {
						if (result.code == web_status.SUCCESS) {
							$.modal.close();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						}  else {
							$.modal.alertError(result.msg);
						}
						$.modal.closeLoading();
					}
				};
				$.ajax(config)
			} else {
				$.modal.alertWarning("请选择字段");
			}
		}

		$(".addTableModelBtn").click(function() {
			var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="selectTable">0</span>项</span>'];
			var options = {
				title: '选择表',
				width: "700",
				url: prefix + "/method_table_model_choose?tableIds="+tableIdRecordArr.join(),
				btn: btn,
				callBack: function (index, layero) {
					var body = layer.getChildFrame('body', index);
					var tableInfo = body.find('#tableInfo').val();
					if (tableInfo) {
						var tableInfoArr = tableInfo.split(",");
						var infoList = [];
						for (var i=0; i<tableInfoArr.length; i++) {
							if (tableInfoArr[i]) {
								var infoArr = tableInfoArr[i].split("=");
								infoList.push({
									"id" : infoArr[0],
									"tableName" : infoArr[1]
								});
							}
						}
						initUl(infoList);
					}
					layer.close(index);
				}
			};
			$.modal.openOptions(options);
		});

		$(function () {
			initUl(tableInfoList);

			if (fieldIdList && fieldIdList.length > 0) {
				for (var i=0; i<fieldIdList.length; i++) {
					fieldIdListObject[fieldIdList[i]] = true;
				}
			}

			$("body").on('change', '.allSelect', function () {
				var flag = this.checked;
				$(this).parents("table").find("tbody input").each(function(){
					if (!$(this).attr('disabled')) {
						$(this).prop("checked", flag);
					}
				});

				checkboxClick();
			});
		})

		function initUl(tableInfoList) {
			if (tableInfoList && tableInfoList.length > 0) {
				for (var i=0; i<tableInfoList.length; i++) {
					var tabTpl = $("#tabTpl").html();
					var id = tableInfoList[i].id;
					var tableName = tableInfoList[i].tableName;
					laytpl(tabTpl).render(id, function (html) {
						$("#tabDiv").append(html);
					});
					if (i==0 && initFlag) {
						initFlag = false;
						$("ul").append("<li class='swiper-slide active'><a aria-expanded=\"true\"  href=\"#tab-"+id+"\" onclick=\"clickTab("+id+")\" role=\"tab\" data-toggle=\"tab\" style = \"margin-right: 15px;\">"+tableName+"</a></li>");
						$("#tab-" + id).addClass('active');
						clickTab(id);
					} else {
						$("ul").append("<li class='swiper-slide'><a aria-expanded=\"false\" href=\"#tab-"+id+"\" onclick=\"clickTab("+id+")\" role=\"tab\" data-toggle=\"tab\" style = \"margin-right: 15px;\">"+tableName+"</a></li>");
					}
					tableIdRecordArr.push(id);
				}
			}
            new Swiper(".tabSwiper", {
                centeredSlidesBounds: true,
                slidesPerView: "auto",
                spaceBetween: 0,
                grabCursor: true,
                slideToClickedSlide: true
            });
		}

		function search(tableId) {
			loadField(tableId, $("#tab-" + tableId + " #searchValue").val());
		}

		var record = {};

		function clickTab(id) {
			if (!record[id]) {
				loadField(id, $("#tab-" + id + " #searchValue").val());
				record[id] = true;
			}
		}

		function loadField(tableId, searchValue) {
			var isInParam = $("#isInParam").val();
			if (isInParam == 1) {
				isInParam = 'Y';
			} else {
				isInParam = '';
			}
			var config = {
				url: ctx + "table/table/fieldInfoList",
				type: "post",
				dataType: "json",
				data: "tableId="+tableId + "&" + "searchValue=" + searchValue + "&isInParam=" + isInParam + "&interfaceId="+ $("#interfaceId").val(),
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$("#tab-" + tableId + " table tbody").empty();
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						if (result.data && result.data.length > 0) {
							var data = {};
							data.list = convert(result.data);
							var paramsTplHtml = $("#paramsTpl").html();
							laytpl(paramsTplHtml).render(data, function (html) {
								$("#tab-" + tableId + " table tbody").append(html);
							});

						}
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		}

		function convert(data) {
			if (data && data.length > 0) {
				for (var i=0; i<data.length; i++) {
					if (fieldIdListObject[data[i].id]) {
						data[i].selected = true;
					}
				}
			}
			return data;
		}

		function checkboxClick() {
			var count = 0;
			var value = '';
			$('table tbody').find(':checkbox').each(function(){
				if ($(this).is(":checked")) {
					count ++;
					value = value + $(this).val() + "=" + $(this).attr('fieldName')
							+ "=" + $(this).attr('fieldEnName')+ "=" + $(this).attr('fieldDataType')+ ',';
				}
			});
			$("#fieldInfo").val(value);
			$("#fieldSelect",window.parent.document).text(count);
		}

	</script>
	<script id="paramsTpl" type="text/template">
		{{# layui.each(d.list, function(index, a){ }}
		<tr>
			{{# if(a.selected) { }}
			<td><input name="fieldId" disabled="disabled" fieldName="{{a.fieldName}}" fieldEnName="{{a.fieldEnName}}" fieldDataType="{{a.fieldDataType}}" onclick="checkboxClick()" type="checkbox" value="{{a.id}}"></td>
			{{# } else { }}
			<td><input name="fieldId" fieldName="{{a.fieldName}}" fieldEnName="{{a.fieldEnName}}" fieldDataType="{{a.fieldDataType}}" onclick="checkboxClick()" type="checkbox" value="{{a.id}}"></td>
			{{# } }}
			<td>{{a.fieldName}}</td>
			<td>{{a.fieldEnName}}</td>
			<td>{{a.fieldDataType}}</td>
		</tr>
		{{# }); }}
	</script>
	<script id="tabTpl" type="text/template">
		<div id="tab-{{d}}" class="tab-pane">
			<div class="search-bg">
				<div data="{{d}}" onclick="search({{d}})" class="search-img searchDiv"></div>
				<input type="text" class="search" id="searchValue">
			</div>
			<table class="table table-hover" style = "margin-top:10px;">
				<thead>
					<tr>
						<td><input type="checkbox" class="allSelect" value="0"></td>
						<td>字段中文名称</td>
						<td>字段英文名称</td>
						<td>字段类型</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</script>
</html>
